<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <title>Archives: 2019 | Ioinc.Fun</title>
  <meta name="description" content="A blog of zero">
  <meta name="keywords" content="blog,stkevintan,IT,Web Front End,ZeroX,ZeroX-V,964849125@qq.com">
  <meta name="HandheldFriendly" content="True">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" href="/images/favicon.ico">
  <link rel="alternate" href="/atom.xml" title="Ioinc.Fun">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="A blog of zero">
<meta name="keywords" content="blog,stkevintan,IT,Web Front End,ZeroX,ZeroX-V,964849125@qq.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Ioinc.Fun">
<meta property="og:url" content="http://blog.ionic.fun/archives/2019/index.html">
<meta property="og:site_name" content="Ioinc.Fun">
<meta property="og:description" content="A blog of zero">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Ioinc.Fun">
<meta name="twitter:description" content="A blog of zero">
    
  <link href="https://fonts.googleapis.com/css?family=Inconsolata|Titillium+Web" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="//cdn.bootcss.com/node-waves/0.7.5/waves.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/style.css">
  <script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
  </script>
</head>
</html>
<body>
  <div id="loading-bar-wrapper">
  <div id="loading-bar"></div>
</div>


  <script>setLoadingBarProgress(20)</script> 
  <header class="l_header">
	<div class="wrapper">
		<div class="nav-main container container--flex">
			<a class="logo flat-box" href="/">
				Ioinc.Fun
			</a>
			<div class="menu">
				<ul class="h-list">
					
						<li>
							<a class="flat-box nav-home" href="/">
								Home
							</a>
						</li>
					
						<li>
							<a class="flat-box nav-archives" href="/archives">
								Archives
							</a>
						</li>
					
						<li>
							<a class="flat-box nav-about" href="/about">
								About
							</a>
						</li>
					
				</ul>
				<div class="underline"></div>
			</div>
			
				<div class="m_search">
					<form name="searchform" class="form u-search-form">
						<input type="text" class="input u-search-input" placeholder="Search">
						<span class="icon icon-search"></span>
					</form>
				</div>
			
			<ul class="switcher h-list">
				
					<li class="s-search"><a href="javascript:void(0)"><span class="icon icon-search flat-box"></span></a></li>
				
				<li class="s-menu"><a href="javascript:void(0)"><span class="icon icon-menu flat-box"></span></a></li>
			</ul>
		</div>
		
		<div class="nav-sub container container--flex">
			<a class="logo" href="javascript:void(0)">
				Word of Forks
			</a>

			<ul class="switcher h-list">
				<li class="s-comment"><a href="javascript:void(0)"><span class="icon icon-chat_bubble_outline flat-box"></span></a></li>
				<li class="s-top"><a href="javascript:void(0)"><span class="icon icon-arrow_upward flat-box"></span></a></li>
				<li class="s-toc"><a href="javascript:void(0)"><span class="icon icon-format_list_numbered flat-box"></span></a></li>
			</ul>
		</div>
	</div>
</header>
<aside class="menu-phone">
	<nav>
		
			<a href="/" class="nav-home nav">
				Home
			</a>
		
			<a href="/archives" class="nav-archives nav">
				Archives
			</a>
		
			<a href="/about" class="nav-about nav">
				About
			</a>
		
	</nav>
</aside>

    <script>setLoadingBarProgress(40);</script>
  <div class="l_body">
    <div class='container clearfix'>
      <div class='l_main'>
        
	
  <script>
    window.subData= { title:'Year : 2019'}
  </script>

<section class="post-list">
	
    <div class="post-wrapper">
      <article class="post reveal ">
    <section class="meta">
        
            <h2 class="title">
                <a href="/2019/05/22/LayUI-Table-添加禁止选中/">
                    LayUI Table 添加禁止选中
                </a>
            </h2>
            
                <time>
      5月 22, 2019
    </time>
                
    
    <div class="cats">
        <a href="/categories/LayUI/">LayUI</a>
    </div>

    </section>
    <section class="article typo">
        <p>LayUI这几年比较流行,里面的Table组件也比较强大，但是前面的CheckBox没有禁止选中功能，今天就来试试，看看能不能给添加一个禁止选中功能。</p>
<h2 id="Fork-LayUI源码"><a href="#Fork-LayUI源码" class="headerlink" title="Fork LayUI源码"></a>Fork LayUI源码</h2><ul>
<li><a href="https://github.com/sentsin/layui" target="_blank" rel="noopener">LayUI项目地址</a></li>
<li>Clone到本地</li>
<li>找到src里面lay下面的modules文件夹里面的table.js</li>
</ul>
<h2 id="添加字段标记"><a href="#添加字段标记" class="headerlink" title="添加字段标记"></a>添加字段标记</h2><ul>
<li><p>参照这里我们也添加一个”IS_DISABLE”的标记<br><img src="http://pruksi5mp.bkt.clouddn.com/2019-05-22-16-14-50.png" alt="2019-05-22-16-14-50"></p>
</li>
<li><p>添加完如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">config: &#123;</span><br><span class="line">           checkName: <span class="string">'LAY_CHECKED'</span>, <span class="comment">//是否选中状态的字段名</span></span><br><span class="line">           indexName: <span class="string">'LAY_TABLE_INDEX'</span>, <span class="comment">//下标索引名</span></span><br><span class="line">           disableName: <span class="string">'LAY_DISABLED'</span> <span class="comment">//是否禁用</span></span><br><span class="line">       &#125; <span class="comment">//全局配置项</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="修改代码逻辑"><a href="#修改代码逻辑" class="headerlink" title="修改代码逻辑"></a>修改代码逻辑</h2><ul>
<li><p>找到区域模板里面的  <code>lay-filter=&quot;layTableAllChoose&quot;</code><br><img src="http://pruksi5mp.bkt.clouddn.com/2019-05-22-14-55-15.png" alt="2019-05-22-14-55-15"></p>
</li>
<li><p>在后面添加如下代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;# if(item2[d.data.disableName])&#123; &#125;&#125; disabled &#123;&#123;# &#125;; &#125;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>添加列渲染<br><img src="http://pruksi5mp.bkt.clouddn.com/2019-05-22-16-02-15.png" alt="2019-05-22-16-02-15"></p>
</li>
<li><p>修改选择逻辑<br><img src="http://pruksi5mp.bkt.clouddn.com/2019-05-22-16-12-51.png" alt="2019-05-22-16-12-51"><br><img src="http://pruksi5mp.bkt.clouddn.com/2019-05-22-16-13-23.png" alt="2019-05-22-16-13-23"></p>
</li>
</ul>
</li>
<li><a href="https://github.com/ZeroX-V/layui/commit/a9b20f55c9881916125b9e9e62a1c33b4804a351?diff=unified" target="_blank" rel="noopener">详细修改请点这里</a></li>
</ul>
<h2 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h2><ul>
<li>在数据里面添加 <code>&quot;LAY_DISABLED&quot;: true,</code></li>
<li>来看看效果<br><img src="http://pruksi5mp.bkt.clouddn.com/1234.gif" alt="1234"></li>
</ul>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><ul>
<li><a href="https://github.com/ZeroX-V/layui/blob/master/src/lay/modules/table.js" target="_blank" rel="noopener">点这里看源码</a></li>
</ul>


            

                    
                        <div class="full-width auto-padding tags">
                            
                                <a href="/tags/LayUI/">
                                    LayUI
                                </a>
                                
                                <a href="/tags/Table/">
                                    Table
                                </a>
                                
                        </div>
                        
    </section>

</article>
    </div>
  
    <div class="post-wrapper">
      <article class="post reveal ">
    <section class="meta">
        
            <h2 class="title">
                <a href="/2019/05/20/hello-world/">
                    Hello World
                </a>
            </h2>
            
                <time>
      5月 20, 2019
    </time>
                
    
    <div class="cats">
        <a href="/categories/Hello/">Hello</a>
    </div>

    </section>
    <section class="article typo">
        <p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>


            

                    
    </section>

</article>
    </div>
  
</section>



      </div>
      <aside class='l_side'>
        
  <section class="m_widget about">
    
        <img class="avatar waves-image" src="/images/avatar.jpg">
        
            <div class="header">
                Zero
            </div>
            <div class="content">
                <div class="desc">Sharing Code to Change the World.</div>
            </div>
</section>

  <section class="m_widget links">
<div class="header">Links</div>
<div class="content">
    <ul class="entry">
    
        <li><a class="flat-box" target="_blank" href="https://github.com/zerox-v">
            <div class="name">GitHub</div>
        </a></li>
    
        <li><a class="flat-box" target="_blank" href="https://www.cnblogs.com/ismars">
            <div class="name">CnBlogs</div>
        </a></li>
    
    </ul>
</div>
</section>

  <section class="m_widget categories">
<div class="header">Categories</div>
<div class="content">
    
    <ul class="entry">
    
        <li><a class="flat-box" href="/categories/Hello/"><div class="name">Hello</div><div class="badget">1</div></a></li>
    
        <li><a class="flat-box" href="/categories/LayUI/"><div class="name">LayUI</div><div class="badget">1</div></a></li>
    
    </ul>
    
</div>
</section>

  
<div class="m_widget tagcloud">
    <div class="header">Tags</div>
    <div class="content">
        <a href="/tags/LayUI/" style="font-size: 14px; color: #808080">LayUI</a> <a href="/tags/Table/" style="font-size: 14px; color: #808080">Table</a>
    </div>
</div>



      </aside>
      <script>setLoadingBarProgress(60);</script>
    </div>
  </div>
  <footer id="footer" class="clearfix">

    <div class="social-wrapper">
        
            
                <a href="https://github.com/zerox-v" class="social github" target="_blank" rel="external">
          <span class="icon icon-github"></span>
        </a>
                
                <a href="https://www.cnblogs.com/ismars" class="social twitter" target="_blank" rel="external">
          <span class="icon icon-twitter"></span>
        </a>
                
                <a href="/atom.xml" class="social rss" target="_blank" rel="external">
          <span class="icon icon-rss"></span>
        </a>
                
                    
    </div>

    <div>Copyright 2019 <a class="codename" href="ionic.fun">Ionic.Fun</a>. All rights reserved. </div>

</footer>
  <script>setLoadingBarProgress(80);</script>
  

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/node-waves/0.7.5/waves.min.js"></script>
<script src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.min.js"></script>
<script src="/js/jquery.fitvids.js"></script>
<script>
	var GOOGLE_CUSTOM_SEARCH_API_KEY = "";
	var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "";
	var ALGOLIA_API_KEY = "";
	var ALGOLIA_APP_ID = "";
	var ALGOLIA_INDEX_NAME = "";
  var AZURE_SERVICE_NAME = "";
  var AZURE_INDEX_NAME = "";
  var AZURE_QUERY_KEY = "";
  var BAIDU_API_ID = "";
  var SEARCH_SERVICE = "hexo";
  var ROOT = "/"||"/";
  if(!ROOT.endsWith('/'))ROOT += '/';
</script>
<script src="/js/search.js"></script>
<script src="/js/app.js"></script>


  <script>setLoadingBarProgress(100);</script>
</body>
</html>
